<template>
  <div class="investRecordContainer">
      <TopBar>投资记录</TopBar>
      <header style="margin-top:1.3333rem">
        <tab :line-width="1" custom-bar-width="1.1rem">
          <tab-item selected @click.native="getList(1)">待确认</tab-item>
          <tab-item @click.native="getList(2)">已投标</tab-item>
          <tab-item @click.native="getList(3)">未投标</tab-item>
      </tab>
      </header>
      <div style="width:100%;height:0.4rem;background-color:#fbfbfd"></div>
      <section class="investRecordContent">
        <div v-if="!currentList" class="noContent">无相关数据</div>
        <Item v-else v-for="item in currentList" :item="item" :key="item.id" :type="type"></Item>
      </section>
      <a href="http://p.qiao.baidu.com/cps/chat?siteId=12039448&userId=21560798">
        <img class="clickMe" src="../../../../static/assets/clickMe.png"/>
      </a>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import Item from '../investRecord/children/Item'
import {getSDK} from '../../../service/wxShare.js'

import { Tab, TabItem } from 'vux'
import {getInvestRecord1,getInvestRecord2,getInvestRecord3} from '../../../service/getData'
import {getStore} from '../../../config/mUtils' 

export default {
  components:{
    TopBar,
    Tab,
    TabItem,
    Item
  },
  beforeCreate(){
    getSDK()
  },
  created(){
    this.getList(1)
  },
  data(){
    return {
      listItems:[],
      currentList:[],
      type:0
    }
  },
  methods:{
    getList(type){
      this.currentList =[];
      switch(type){
        case 1 :
          // this.changeList(1)
          getInvestRecord1(getStore('loginkey'))
            .then(res=>{
              // console.log(res)
              if(res.status == 1){
                this.currentList = res.list
                this.type = 1
              }
            })
        break;
        case 2 :
          // this.changeList(2)
          getInvestRecord2(getStore('loginkey'))
            .then(res=>{
              // console.log(res)
              if(res.status == 1){
                this.currentList = res.list
                this.type = 2
              }
            })
        break;
        case 3 :
          // this.changeList(3)
          getInvestRecord3(getStore('loginkey'))
            .then(res=>{
              // console.log(res)
              if(res.status == 1){
                this.currentList = res.list
                this.type = 3
              }
            })
        break;
      }
    },
    changeList(type){
      // for(let item in this.listItems){
      //   if(this.listItems[item].type == type){
      //     this.currentList.push(this.listItems[item]);
      //   }
      // }

    }
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

  .investRecordContainer{
    .vux-tab .vux-tab-item.vux-tab-selected{
      color: #dd3832;
      border-bottom: 3px solid #dd3832;
    }
    span.vux-tab-bar-inner{
      background-color:#dd3832;
    }
    .investRecordContent{
      .wh(90%,100%);
      .cl();
      max-width: 9rem;
      .noContent{
        text-align: center;
        .sc(.4rem,#939393);
      }
    }
    .clickMe{
      position: fixed;
      .wh(1.8667rem,1.8667rem);
      right: 0.5067rem;
      bottom: 10%
    }
  }
</style>
